import React from 'react';
import { Tabs } from 'antd';
import DrugCard from './DrugCard';
import { DrugData, TabConfig } from '../hooks/useDrugCategories';
import style from './DrugTabs.module.css';

interface DrugTabsProps {
  drugList: DrugData[];
  activeTab: string;
  tabConfigs: TabConfig[];
  onTabChange: (key: string) => void;
  getFilteredDrugs: (tabKey: string, maxItems?: number) => DrugData[];
  loading?: boolean;
  error?: string | null;
}

const DrugTabs: React.FC<DrugTabsProps> = ({
  drugList,
  activeTab,
  tabConfigs,
  onTabChange,
  getFilteredDrugs,
  loading = false,
  error = null
}) => {
  // 生成 Tabs 配置
  const generateTabItems = () => {
    return tabConfigs.map(config => ({
      key: config.key,
      label: config.label,
      children: (
        <div className={style.drugGrid}>
          {loading ? (
            <div className={style.loadingContainer}>
              <div className={style.loadingSpinner}></div>
              <p>加载中...</p>
            </div>
          ) : error ? (
            <div className={style.errorContainer}>
              <p className={style.errorMessage}>{error}</p>
              <button 
                className={style.retryButton}
                onClick={() => window.location.reload()}
              >
                重试
              </button>
            </div>
          ) : (
            <>
              {getFilteredDrugs(config.key, config.maxItems).map((drug) => (
                <DrugCard key={drug.id} drug={drug} />
              ))}
              {getFilteredDrugs(config.key, config.maxItems).length === 0 && (
                <div className={style.noDrugs}>
                  {config.key === '1' ? '暂无药品数据' : '暂无相关药品'}
                </div>
              )}
            </>
          )}
        </div>
      ),
    }));
  };

  return (
    <div className={style.tabsContainer}>
      <Tabs 
        activeKey={activeTab} 
        items={generateTabItems()} 
        onChange={onTabChange} 
        size='large'
        className={style.customTabs}
      />
    </div>
  );
};

export default DrugTabs;
